Angular Material এর Autocomplete কম্পোনেন্ট ব্যবহারকারীদের দ্রুত তথ্য প্রদান এবং তাদের জন্য একটি উন্নত ইউজার ইন্টারফেস তৈরি করার জন্য ব্যবহৃত হয়। এটি সাধারণত ব্যবহারকারীর ইনপুট অনুযায়ী সাজেস্টেড ডেটা বা অপশন প্রদর্শন করতে ব্যবহৃত হয়, যা তাদের টাইপিংয়ের অভিজ্ঞতাকে আরও সহজ এবং দ্রুত করে তোলে।

Angular Material Autocomplete কম্পোনেন্টটি সাধারণত mat-autocomplete ট্যাগ ব্যবহার করে তৈরি হয়, যা একটি ইনপুট ফিল্ডের সাথে যুক্ত থাকে। ব্যবহারকারী যখন ইনপুট দেন, তখন এটি তাদের প্রাথমিক ইনপুটের ভিত্তিতে সাজেস্ট করা অপশনগুলির একটি তালিকা দেখায়।

Autocomplete কম্পোনেন্টের ব্যবহারের ধাপসমূহ

১. প্রয়োজনীয় মডিউল ইমপোর্ট করা

আপনার অ্যাপ্লিকেশনে Autocomplete কম্পোনেন্ট ব্যবহারের জন্য, প্রথমে Angular Material এর MatAutocompleteModule এবং MatInputModule মডিউলগুলিকে আপনার app.module.ts ফাইলে ইমপোর্ট করতে হবে।

import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  imports: [
    MatAutocompleteModule,
    MatInputModule
  ]
})
export class AppModule {}

২. HTML টেমপ্লেটে Autocomplete ব্যবহার

mat-autocomplete কম্পোনেন্টটি একটি ইনপুট ফিল্ডের সাথে যুক্ত হয় এবং এটি একটি ড্রপডাউন তালিকা হিসেবে সাজেস্টেড অপশনগুলি দেখায়। নিচে একটি সহজ উদাহরণ দেওয়া হলো:

<mat-form-field>
  <input matInput [matAutocomplete]="auto" [(ngModel)]="selectedOption" placeholder="Search">
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let option of filteredOptions" [value]="option">
      {{ option }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

এখানে:

• matInput: এটি ইনপুট ফিল্ডের জন্য Angular Material স্টাইল প্রয়োগ করে।
• [matAutocomplete]="auto": এটি mat-autocomplete কম্পোনেন্টটি ইনপুট ফিল্ডের সাথে সংযুক্ত করে।
• filteredOptions: এটি ইনপুটের সাথে মিল রেখে সাজেস্টেড অপশনগুলির একটি তালিকা।

৩. টাইপিং অনুযায়ী সাজেস্টেড অপশনগুলি ফিল্টার করা

Autocomplete কম্পোনেন্টের জন্য অপশনগুলিকে ফিল্টার করার জন্য আপনাকে কিছু কোড লিখতে হবে যাতে ব্যবহারকারী যা টাইপ করছে তা অনুযায়ী সাজেস্ট করা অপশন দেখানো হয়।

নিচে TypeScript ফাইলে filteredOptions কিভাবে তৈরি করতে হয়, তার উদাহরণ দেয়া হলো:

import { Component } from '@angular/core';

@Component({
  selector: 'app-autocomplete-example',
  templateUrl: 'autocomplete-example.component.html',
})
export class AutocompleteExampleComponent {
  options: string[] = ['Apple', 'Banana', 'Cherry', 'Date', 'Grape', 'Lemon', 'Mango', 'Orange', 'Papaya'];
  filteredOptions: string[] = [];
  selectedOption: string;

  filterOptions(value: string): void {
    this.filteredOptions = this.options.filter(option => option.toLowerCase().includes(value.toLowerCase()));
  }
}

এখানে:

• options: এটি একটি অ্যারে যা সমস্ত সম্ভাব্য অপশন ধারণ করে।
• filteredOptions: এটি ব্যবহারকারীর ইনপুটের উপর ভিত্তি করে ফিল্টার করা অপশনগুলির অ্যারে।
• filterOptions(): এই মেথডটি ইনপুটের মানের উপর ভিত্তি করে অপশনগুলিকে ফিল্টার করে।

এখন, যখন ব্যবহারকারী ইনপুট দেবে, তখন filterOptions মেথডটি কল হবে এবং filteredOptions আপডেট হবে, যার মাধ্যমে mat-option এলিমেন্টগুলির তালিকা পরিবর্তিত হবে।

৪. ইনপুট এবং সাজেস্টেড অপশনগুলির স্টাইলিং

আপনি সহজেই Angular Material এর মাধ্যমে ইনপুট ফিল্ড এবং সাজেস্টেড অপশনগুলির স্টাইল কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, আপনি mat-form-field এর মধ্যে বিভিন্ন স্টাইল যোগ করতে পারেন, যেমন:

<mat-form-field appearance="fill">
  <input matInput [matAutocomplete]="auto" [(ngModel)]="selectedOption" placeholder="Search">
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let option of filteredOptions" [value]="option">
      {{ option }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

এখানে appearance="fill" স্টাইলটি ইনপুট ফিল্ডের প্রেক্ষাপট পরিবর্তন করে।

Autocomplete এর অন্যান্য বৈশিষ্ট্য

1. Debouncing: যখন ব্যবহারকারী দ্রুত টাইপ করে, তখন ফিল্টার অপশনগুলির সাথে ডিবাউন্সিং প্রয়োগ করা উচিত, যাতে অপ্রয়োজনীয় ফাংশন কল এড়ানো যায়।
2. Keyboard Navigation: Angular Material এর মাধ্যমে আপনি কীবোর্ড নেভিগেশন এবং অপশন সিলেকশন ব্যবস্থাও কনফিগার করতে পারেন।
3. Custom Templates: mat-autocomplete এ আপনি কাস্টম টেমপ্লেট ব্যবহার করে সাজেস্টেড অপশনগুলির জন্য আরও বিস্তারিত কনটেন্ট প্রদর্শন করতে পারেন, যেমন আইকন বা অন্যান্য HTML উপাদান।

Angular Material এর Autocomplete কম্পোনেন্ট ব্যবহার করে আপনি একটি দ্রুত, ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব অনুসন্ধান বা সাজেশন সিস্টেম তৈরি করতে পারবেন। এটি ইনপুট ফিল্ডের সাথে অটো সাজেস্ট অপশন প্রদর্শন করতে সহায়ক, যা ব্যবহারকারীর টাইপিং অভিজ্ঞতাকে আরও সহজ এবং দ্রুত করে তোলে। mat-autocomplete ব্যবহার করে আপনি ফিল্টারিং, স্টাইলিং এবং কাস্টমাইজেশন সহজেই করতে পারেন।

Angular Material এর Autocomplete কম্পোনেন্টটি একটি অত্যন্ত শক্তিশালী এবং প্রয়োজনীয় UI উপাদান, যা ব্যবহারকারীদের টাইপ করার সময় তাদের জন্য প্রাসঙ্গিক সুপারিশ (suggestions) প্রদর্শন করে। এটি Reactive Forms এর সাথে একসাথে ব্যবহার করতে অত্যন্ত সুবিধাজনক, যেখানে আপনি সহজেই ইউজারের ইনপুট ভ্যালু চেক করতে এবং সুপারিশ সিস্টেম তৈরি করতে পারেন।

এখানে আমরা Angular Material Autocomplete কম্পোনেন্টটি কিভাবে Reactive Forms এর সাথে ব্যবহার করা যায় তা দেখব।

১. প্রাথমিক প্রস্তুতি

প্রথমে, আপনাকে MatAutocompleteModule এবং ReactiveFormsModule ইমপোর্ট করতে হবে।

Step 1: প্রয়োজনীয় মডিউলগুলি ইমপোর্ট করা

app.module.ts ফাইলে MatAutocompleteModule এবং ReactiveFormsModule ইমপোর্ট করুন:

import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    MatAutocompleteModule,
    ReactiveFormsModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

২. Reactive Form সেটআপ করা

React Forms ব্যবহার করতে, আপনাকে প্রথমে FormGroup এবং FormControl ব্যবহার করে একটি রিঅ্যাকটিভ ফর্ম তৈরি করতে হবে। নিচে একটি উদাহরণ দেওয়া হল, যেখানে Autocomplete এর জন্য একটি ফর্ম কন্ট্রোল তৈরি করা হয়েছে।

Step 2: ফর্ম তৈরি করা

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  searchForm: FormGroup;
  options: string[] = ['Apple', 'Banana', 'Orange', 'Mango', 'Pineapple', 'Peach'];

  constructor() {
    this.searchForm = new FormGroup({
      search: new FormControl('')
    });
  }
}

এখানে options অ্যারে একটি সাধারণ ফলের তালিকা, যা Autocomplete কম্পোনেন্টে প্রস্তাব হিসেবে ব্যবহার হবে।

৩. HTML ফাইলে Autocomplete ব্যবহার করা

Angular Material এর mat-autocomplete কম্পোনেন্টটি ব্যবহার করতে, HTML ফাইলে এটি কনফিগার করতে হবে।

Step 3: Autocomplete HTML ফাইল

<form [formGroup]="searchForm">
  <mat-form-field appearance="fill">
    <mat-label>Search for fruits</mat-label>
    <input matInput [matAutocomplete]="auto" formControlName="search">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options | filter:searchForm.value.search" [value]="option">
        {{ option }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

এখানে:

• mat-form-field: Angular Material এর ফর্ম ফিল্ড কম্পোনেন্ট, যেটি ইনপুট এবং অন্যান্য ফর্ম উপাদানগুলি সুন্দরভাবে প্রদর্শন করতে সহায়ক।
• mat-autocomplete: এটি ব্যবহারকারীর টাইপ করার সময় প্রাসঙ্গিক সুপারিশ প্রদর্শন করে।
• *ngFor: এই ডিরেকটিভের মাধ্যমে options অ্যারে থেকে প্রতিটি অপশন দেখানো হচ্ছে।
• filter: এখানে আমরা filter পাইপ ব্যবহার করেছি যা ডাটা ফিল্টার করার জন্য, তবে এটি আলাদা পাইপ তৈরি করতে হতে পারে (যেমন, search ফিল্টার করতে)।

৪. ফিল্টারিং ও অটোকমপ্লিট

আমরা Autocomplete কম্পোনেন্টের মধ্যে একটি filter পাইপ ব্যবহার করেছি যাতে ইউজারের ইনপুট অনুযায়ী অটোকমপ্লিটের রেজাল্টস ফিল্টার করা যায়। তবে Angular এর নিজস্ব filter pipe নেই, তাই আপনাকে নিজেই একটি filter পাইপ তৈরি করতে হবে।

Step 4: ফিল্টার পাইপ তৈরি করা

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if (!items) return [];
    if (!searchText) return items;
    searchText = searchText.toLowerCase();
    return items.filter(item => item.toLowerCase().includes(searchText));
  }
}

এটি একটি কাস্টম পাইপ যা ব্যবহারকারীর ইনপুটের সাথে তালিকা ফিল্টার করবে।

৫. অ্যাপ্লিকেশন চলানো

এখন আপনি যখন অ্যাপ্লিকেশন চালাবেন, তখন Reactive Form এর মাধ্যমে আপনি Autocomplete কম্পোনেন্ট ব্যবহার করতে পারবেন, এবং ব্যবহারকারীর ইনপুট অনুযায়ী প্রাসঙ্গিক ফলের নাম দেখাবে।

Angular Material Autocomplete কম্পোনেন্টটি Reactive Forms এর সাথে একত্রে ব্যবহার করে একটি অত্যন্ত শক্তিশালী এবং ইন্টারেক্টিভ ইউজার ইন্টারফেস তৈরি করা সম্ভব। এটি search, filtering, এবং suggestions ফিচারগুলিকে সহজভাবে ইমপ্লিমেন্ট করতে সহায়তা করে। FormControl এবং FormGroup ব্যবহার করে ইনপুট ভ্যালু ট্র্যাক করা যায় এবং ডেটা বাইন্ডিংয়ের মাধ্যমে ব্যবহারকারীর সঠিক অভিজ্ঞতা প্রদান করা হয়।